* {
  padding: 0;
  margin: 0;
}

body {
  height: 864px;
  background-image: url(../img/bg.gif);
}
button:hover {
 cursor: pointer;
}
body h4 {
  font-size: 30px;
  margin: 10px auto 10px;
  text-indent: 9em;
  width: 800px;
}

body #itembox {
  /* cursor: pointer; */
  height: 600px;
  width: 1000px;
  background-color: whitesmoke;
  margin: 0 auto;
  position: relative;
  box-shadow: 0 8px 8px rgba(10, 16, 20, 0.24), 0 0 8px rgba(10, 16, 20, 0.12);
}

body #itembox #tab {
  position: absolute;
  height: 600px;
  background-color: pink;
  width: 200px;
  background-color: #252829;
}

body #itembox #tab li {
  cursor: pointer;
  list-style: none;
  background-color: #312e2e;
  color: white;
  font: 700 20px "Arile";
  height: 50px;
  line-height: 50px;
  text-indent: 2em;
  border-bottom: 0.1px solid gray;
}

body #itembox section {
  display: none;
  position: absolute;
  height: 600px;
  width: 800px;
  right: 0;
}

body #itembox section #usersbox {
  height: 100px;
  width: 100%;
  position: relative;
}

body #itembox section #usersbox button {
  position: absolute;
  right: 0;
  background-color: skyblue;
  width: 100px;
  height: 50px;
  font: 700 14px "a";
  color: white;
  border: 0;
  cursor: pointer;
}

body #itembox section #usersbox button:hover {
  filter: brightness(0.8);
}

body #itembox section #usersbox table {
  top: 50px;
  position: absolute;
}

body #itembox section #usersbox table td {
  font-weight: 700;
  padding-bottom: 0;
}

body #itembox section #usersmsg {
  position: relative;
  width: 800px;
  height: 300px;
}

body #itembox section #usersmsg li {
  height: 250px;
  position: absolute;
  width: 800px;
  list-style: none;
}

body #itembox section #usersmsg li td button {
  height: 30px;
  border: 0;
  width: 50px;
  border-radius: 5px;
  color: white;
}

body #itembox section #usersmsg li td .per_change {
  background-color: green;
}

body #itembox section #usersmsg li td .per_can {
  background-color: red;
}

body #itembox section #usersmsg li td button:hover {
  filter: brightness(0.8);
}

body #itembox #exit {
  position: absolute;
  bottom: 30px;
  left: 80px;
}

body #itembox i:hover {
  filter: brightness(0.8);
}

#usersec div {
  height: 200px;
  position: relative;
}

#usersec div a {
  position: absolute;
  text-decoration: none;
  height: 40px;
  width: 100px;
  background-color: skyblue;
  color: white;
  font: 700 15px "a";
  text-align: center;
  line-height: 40px;
  top: 40px;
  left: 350px;
  border-radius: 10px;
}

#usersec div a:hover {
  filter: brightness(0.8);
}

#usersec table {
  height: 300px;
  width: 600px;
  margin: 40px auto 0;
}

#usersec table tr td {
  border-bottom: 1px solid #CCCCCC;
  text-indent: 2em;
}

#usersec table tr td:first-child {
  width: 100px;
  text-align: right;
}

#shadowbox {
  display: none;
  top: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

#shadowbox #changebox {
  margin: 50px auto;
  border-radius: 20px;
  height: 428px;
  width: 400px;
  z-index: 999;
  background-color: whitesmoke;
}

#shadowbox #changebox input {
  margin: 12px 48px;
  height: 45px;
  font-size: 20px;
  width: 300px;
}

#shadowbox #changebox i {
  margin-left: 360px;
}

#shadowbox #changebox input:focus {
  outline: 1px #1a73e8 solid;
}

#shadowbox #changebox button {
  height: 40px;
  width: 100px;
  margin: 18px 50px;
  border: 0;
  font: 700 14px "ll";
  color: white;
  border-radius: 10px;
}

#shadowbox #changebox button:hover {
  filter: brightness(0.8);
}

#eidshadowbox {
  display: none;
  top: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

#eidshadowbox #eidchangebox {
  margin: 50px auto;
  border-radius: 20px;
  height: 428px;
  width: 400px;
  z-index: 999;
  background-color: whitesmoke;
}

#eidshadowbox #eidchangebox input {
  margin: 18px 48px;
  height: 45px;
  font-size: 20px;
  width: 300px;
}

#eidshadowbox #eidchangebox input:focus {
  outline: 1px #1a73e8 solid;
}

#eidshadowbox #eidchangebox i {
  margin-left: 360px;
}

#eidshadowbox #eidchangebox button {
  height: 40px;
  width: 100px;
  margin: 18px 50px;
  border: 0;
  font: 700 14px "ll";
  color: white;
  border-radius: 10px;
}

#eidshadowbox #eidchangebox button:hover {
  filter: brightness(0.8);
}

#exp_fram {
  height: 48px;
  width: 698px;
  border: 1px solid skyblue;
  outline: 0;
  font-size: 20px;
  position: absolute;
  text-indent: 2em;
}

button {
  cursor: pointer;
}

#expshadowtrue {
  display: none;
  top: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

#expshadowtrue #expt {
  margin: 0px auto;
  border-radius: 20px;
  height: 750px;
  width: 900px;
  z-index: 999;
  background-color: whitesmoke;
  position: relative;
  top: 0%;
}

#expshadowtrue #expt i {
  position: absolute;
  right: 5px;
}

#expshadowtrue #expt h3 {
  position: absolute;
  left: 173px;
  top: 70px;
}

#expshadowtrue #expt #acs {
  left: 124px;
  top: 53px;
}

#expshadowtrue #expt table {
  margin: 0 auto;
  position: absolute;
  top: 103px;
  left: 13%;
}

#expshadowtrue #expt table th {
  background-color: skyblue;
  height: 50px;
}

#expshadowtrue #expt table td {
  width: 150px;
  height: 50px;
  text-align: center;
}

#expshadowtrue #expt table tr {
  background-color: rgba(196, 184, 184, 0.78);
}

#pack_pag {
  position: relative;
  left: 30%;
  top: 50px;
}

#pack_pag #usefront {
  float: left;
  height: 40px;
  width: 50px;
  font-size: 20px;
}

#pack_pag #toright {
  float: left;
  height: 40px;
  width: 50px;
  font-size: 20px;
}

#pack_pag #toleft {
  float: left;
  height: 40px;
  width: 50px;
  font-size: 20px;
}

#pack_pag #uselast {
  float: left;
  height: 40px;
  width: 50px;
  font-size: 20px;
}

#pack_pag #pages {
  float: left;
  height: 38px;
  width: 100px;
  border: 1px solid black;
  font-size: 20px;
  text-align: center;
  line-height: 38px;
}

#foodsec #addfood {
  position: absolute;
  left: 740px;
  top: 540px;
}

#foodsec input {
  height: 48px;
  width: 698px;
  border: 1px solid skyblue;
  outline: 0;
  font-size: 20px;
  position: relative;
  text-indent: 2em;
}

#foodsec #exp_food {
  position: absolute;
  right: 0;
  top: 0;
  background-color: skyblue;
  width: 100px;
  height: 50px;
  font: 700 14px "a";
  color: white;
  border: 0;
}

#foodsec #exp_food:hover {
  filter: brightness(0.8);
}

#foodsec tr {
  height: 50px;
  background-color: #3887a8;
}

#foodsec tr th {
  height: 50px;
}

#foodsec #foodbox {
  height: 300px;
  width: 800px;
  position: relative;
}

#foodsec #foodbox li {
  list-style: none;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

#foodsec #foodbox li tr {
  background-color: whitesmoke;
}

#foodsec #foodbox li tr td {
  height: 50px;
  width: 100px;
  text-align: center;
  line-height: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#foodsec #foodbox li tr td button {
  color: white;
  height: 30px;
  border: 0;
  width: 50px;
  border-radius: 5px;
  color: white;
}

#foodsec #foodbox li tr td button:hover {
  filter: brightness(0.8);
}

#food_eid_shadow {
  display: none;
  top: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

#food_eid_shadow #foodchangebox {
  margin: 20px auto;
  border-radius: 20px;
  height: 590px;
  width: 400px;
  z-index: 999;
  background-color: whitesmoke;
}

#food_eid_shadow #foodchangebox input {
  margin: 18px 48px;
  height: 45px;
  font-size: 20px;
  width: 300px;
}

#food_eid_shadow #foodchangebox input:focus {
  outline: 1px #1a73e8 solid;
}

#food_eid_shadow #foodchangebox i {
  margin-left: 360px;
}

#food_eid_shadow #foodchangebox button {
  height: 40px;
  width: 100px;
  margin: 18px 50px;
  border: 0;
  font: 700 14px "ll";
  color: white;
  border-radius: 10px;
}

#food_eid_shadow #foodchangebox button:hover {
  filter: brightness(0.8);
}

#expfoodbox {
  display: none;
  top: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

#expfoodbox #expfood {
  margin: 10px auto;
  height: 700px;
  width: 900px;
  z-index: 999;
  background-color: whitesmoke;
  position: relative;
  top: 0%;
  overflow-y: scroll;
}

#expfoodbox #expfood i {
  position: absolute;
  right: 5px;
}

#expfoodbox #expfood h3 {
  position: absolute;
  left: 173px;
  top: 70px;
}

#expfoodbox #expfood #foodimg {
  left: 124px;
  top: 53px;
}

#expfoodbox #expfood table {
  margin: 0 auto;
  position: absolute;
  top: 103px;
  left: 13%;
}

#expfoodbox #expfood table th {
  background-color: #236d8a;
  height: 50px;
}

#expfoodbox #expfood table td {
  width: 150px;
  height: 50px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#expfoodbox #expfood table tr {
  background-color: skyblue;
}

#add_food_shadow {
  display: none;
  top: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

#add_food_shadow #add_food {
  margin: 20px auto;
  border-radius: 20px;
  height: 590px;
  width: 400px;
  z-index: 999;
  background-color: whitesmoke;
}

#add_food_shadow #add_food input {
  margin: 18px 48px;
  height: 45px;
  font-size: 20px;
  width: 300px;
}

#add_food_shadow #add_food input:focus {
  outline: 1px #1a73e8 solid;
}

#add_food_shadow #add_food i {
  margin-left: 360px;
}

#add_food_shadow #add_food button {
  height: 40px;
  width: 100px;
  margin: 18px 50px;
  border: 0;
  font: 700 14px "ll";
  color: white;
  border-radius: 10px;
}

#add_food_shadow #add_food button:hover {
  filter: brightness(0.8);
}

#pack_foodpag {
  position: absolute;
  bottom: 18%;
  left: 30%;
}

#pack_foodpag #foodfront {
  float: left;
  height: 40px;
  width: 50px;
  font-size: 20px;
}

#pack_foodpag #arw-right {
  float: left;
  height: 40px;
  width: 50px;
  font-size: 20px;
}

#pack_foodpag #arw-left {
  float: left;
  height: 40px;
  width: 50px;
  font-size: 20px;
}

#pack_foodpag #foodlast {
  float: left;
  height: 40px;
  width: 50px;
  font-size: 20px;
}

#pack_foodpag #food {
  float: left;
  height: 38px;
  width: 100px;
  border: 1px solid black;
  font-size: 20px;
  text-align: center;
  line-height: 38px;
}

#userimg {
  position: relative;
  top: 31px;
  left: 348px;
}

#foodsec #addfood {
  left: 740px;
  top: 540px;
}

#foodsec input {
  height: 48px;
  width: 698px;
  border: 1px solid skyblue;
  outline: 0;
  font-size: 20px;
  position: relative;
  text-indent: 2em;
}

#foodsec #exp_food {
  position: absolute;
  right: 0;
  top: 0;
  background-color: skyblue;
  width: 100px;
  height: 50px;
  font: 700 14px "a";
  color: white;
  border: 0;
}

#foodsec #exp_food:hover {
  filter: brightness(0.8);
}

#foodsec tr {
  height: 50px;
  background-color: #3887a8;
}

#foodsec tr th {
  height: 50px;
}

#ordersec #addorder {
  position: absolute;
  left: 740px;
  top: 540px;
}

#ordersec input {
  height: 48px;
  width: 698px;
  border: 1px solid skyblue;
  outline: 0;
  font-size: 20px;
  position: relative;
  text-indent: 2em;
}

#ordersec #exp_order {
  position: absolute;
  right: 0;
  top: 0;
  background-color: skyblue;
  width: 100px;
  height: 50px;
  font: 700 14px "a";
  color: white;
  border: 0;
}

#ordersec #exp_order:hover {
  filter: brightness(0.8);
}

#ordersec tr {
  height: 50px;
  background-color: #3887a8;
}

#ordersec tr th {
  height: 50px;
}

#ordersec #orderbox {
  height: 300px;
  width: 800px;
  position: relative;
}

#ordersec #orderbox li {
  list-style: none;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

#ordersec #orderbox li tr {
  background-color: whitesmoke;
}

#ordersec #orderbox li tr td {
  height: 50px;
  width: 100px;
  text-align: center;
  line-height: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ordersec #orderbox li tr td button {
  color: white;
  height: 30px;
  border: 0;
  width: 50px;
  border-radius: 5px;
  color: white;
}

#ordersec #orderbox li tr td button:hover {
  filter: brightness(0.8);
}

#pack_orderpag {
  position: absolute;
  bottom: 18%;
  left: 30%;
}

#pack_orderpag #orderfront {
  float: left;
  height: 40px;
  width: 50px;
  font-size: 20px;
}

#pack_orderpag #arw_right {
  float: left;
  height: 40px;
  width: 50px;
  font-size: 20px;
}

#pack_orderpag #arw_left {
  float: left;
  height: 40px;
  width: 50px;
  font-size: 20px;
}

#pack_orderpag #orderlast {
  float: left;
  height: 40px;
  width: 50px;
  font-size: 20px;
}

#pack_orderpag #order {
  float: left;
  height: 38px;
  width: 100px;
  border: 1px solid black;
  font-size: 20px;
  text-align: center;
  line-height: 38px;
}

#order_eid_shadow {
  display: none;
  top: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

#order_eid_shadow #orderchangebox {
  margin: 50px auto;
  border-radius: 20px;
  height: 400px;
  width: 400px;
  z-index: 999;
  background-color: whitesmoke;
}

#order_eid_shadow #orderchangebox input {
  margin: 18px 48px;
  height: 45px;
  font-size: 20px;
  width: 300px;
}

#order_eid_shadow #orderchangebox input:focus {
  outline: 1px #1a73e8 solid;
}

#order_eid_shadow #orderchangebox i {
  margin-left: 360px;
}

#order_eid_shadow #orderchangebox button {
  height: 40px;
  width: 100px;
  margin: 18px 50px;
  border: 0;
  font: 700 14px "ll";
  color: white;
  border-radius: 10px;
}

#order_eid_shadow #orderchangebox button:hover {
  filter: brightness(0.8);
}

#us {
  height: 30px;
  width: 200px;
  border-bottom: 1px solid gray;
  margin: 0 auto;
  font-size: 20px;
  text-align: center;
  line-height: 30px;
}

#exporderbox {
  display: none;
  top: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

#exporderbox #exporder {
  margin: 10px auto;
  height: 700px;
  width: 900px;
  z-index: 999;
  background-color: whitesmoke;
  position: relative;
  top: 0%;
  overflow-y: scroll;
  border-radius: 10px;
}

#exporderbox #exporder i {
  position: absolute;
  right: 5px;
}

#exporderbox #exporder h3 {
  position: absolute;
  left: 173px;
  top: 70px;
}

#exporderbox #exporder #orderimg {
  left: 124px;
  top: 53px;
}

#exporderbox #exporder table {
  margin: 0 auto;
  position: absolute;
  top: 103px;
  left: 13%;
}

#exporderbox #exporder table th {
  background-color: #236d8a;
  height: 50px;
}

#exporderbox #exporder table td {
  width: 150px;
  height: 50px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#exporderbox #exporder table tr {
  background-color: skyblue;
}

#add_order_shadow {
  display: none;
  top: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

#add_order_shadow #add_order {
  margin: 20px auto;
  border-radius: 20px;
  height: 500px;
  width: 400px;
  z-index: 999;
  background-color: whitesmoke;
}

#add_order_shadow #add_order input {
  margin: 18px 48px;
  height: 45px;
  font-size: 20px;
  width: 300px;
}

#add_order_shadow #add_order input:focus {
  outline: 1px #1a73e8 solid;
}

#add_order_shadow #add_order i {
  margin-left: 360px;
}

#add_order_shadow #add_order button {
  height: 40px;
  width: 100px;
  margin: 18px 50px;
  border: 0;
  font: 700 14px "ll";
  color: white;
  border-radius: 10px;
}

#add_order_shadow #add_order button:hover {
  filter: brightness(0.8);
}
